<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    @font-face {
        font-family: 'PingFang';
        src: url('https://cdn.jsdelivr.net/npm/frontfontpackage@1.0.0/PingFang/苹方黑体-细-简.ttf');
        font-weight: normal;
        font-style: normal;
        font-display: optional
    }

    body {
        padding: 30px;
    }

    
</style>


<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        width: 1024px;
        height:96vh;
        background: #1C1D1E;
        font-size: 12px !important; 
    }
    /* 只要这里控制宽度 */
    .card{
        background: #1F2426;
        width:8% ;
        
        height: 90vh ;
        border-radius: 20px;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        /* flex:0.7 */
    }
    .container{
        
    }
    .title{
        padding-top: 8px;
        font-size: calc( 8rem / 12 ) ;
        color: white;
        text-align: center;
        padding-right: 20px;
    }
    .scene_item{
        display: block;
        width: 100%;
        margin: 0 auto;
        color: white;
       /* padding: calc( 12rem / 12 ); */
        margin-top: calc(12rem / 12);
        position: relative;
        opacity: 0.5;
    }


    .active.scene_item{
        display: block;
        width: 100%;
        margin: 0 auto;
        color: white;
       /* padding: calc( 12rem / 12 ); */
        margin-top: calc(12rem / 12);
        position: relative;
        opacity: 1;
    }
    /* 激活的样式 */
    .active.scene_item::before {
       content: "";
        top: 12%;
        width: 100%;
        height: 60%;
        position: absolute;
        border-left: 1px solid #ffffff;
       /* padding: calc( 12rem / 12 ); */
        
    }
    .scene_item_container{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .scene_item_img{
        width: calc( 70% - 0px );
        height: calc(36rem / 12);
        object-fit: cover;
        margin: 0 auto;
        text-align: center;
        border-radius: 10px;
    }
    .scene_item_text{
        width: 100%;
        text-align: center;
        /* padding:0px; */
    }
    
</style>


<style>
    .all {
        display: flex;
        width:96vw;
        height: 96vh;
        flex-direction: row;
        gap: 30px;
    }
    .center{
        display: flex;
        background: #1F2426;
        flex: 8;
    }
</style>


<style>
    .right{
        flex: 1.5;
        background: #1F2426;
        right: 40px;
        margin-right: 20px;
    }
</style>

<body>
  
    <div class="all">
        <div class="card">
            <div class="title">
               <h3> 场景列表</h3>
            </div>
          
            
           
            <div class="container">
                <div class="scene_item active">
                    <div class="scene_item_container">
                        <img class="scene_item_img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkCKmJBvMlFBx5AtwAPmYT3BIZCP3aDUdxyaKeA1PJHA&s" alt="">
                         <div class="scene_item_text">scene</div>
                    </div>
                </div>
    
                <div class="scene_item">
                    <div class="scene_item_container">
                        <img class="scene_item_img" src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="">
                         <div class="scene_item_text">scene1</div>
                    </div>
                </div>
    
                <div class="scene_item">
                    <!-- ss -->
                </div>
            </div>
        </div>
        
        <div class="center">
    
        </div>

        <div class="right">
    
        </div>
    </div>
   
   
    <script>
        let main = document.querySelector(".tab")
        main.addEventListener("click", (e) => {
            if (JSON.stringify(e.target.classList).match(/tab_item/)) {
                Array.from(main.children).forEach((e) => {
                    e.classList.remove("text_active")
                })
                e.target.classList.add("text_active")
            }

        })
        let beginPath = {}
        // main.addEventListener("drop", (e) => {
        //         e = e || window.event;
        //         isDraw = true;
        //         ctx.moveTo(e.pageX, e.pageY)
        //     }
        //     )

        
    </script>
</body>

</html>